<template>
     <el-menu
        default-active="/"
        :router="true"
        class="el-menu-vertical-demo"
        background-color="#283046"
        text-color="#fff"
        active-text-color="#ffd04b"
        @open="handleOpen"
      @close="handleClose"
      :unique-opened="true"
        >

        <el-menu-item index="/">
          <i class="el-icon-s-home"></i>
          <span slot="title">首&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;页</span>
        </el-menu-item>
        <el-submenu index="/run-ana/real-time">
        <template slot="title">
          <i class="el-icon-document"></i>
          <span>运 行 分 析</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/run-ana/real-time">实时数据</el-menu-item>
          <el-menu-item index="/run-ana/data-ana">数据分析</el-menu-item>
        </el-menu-item-group>

      </el-submenu>
      <el-submenu index="/eff-ana/over-all">
        <template slot="title">
          <i class="el-icon-s-data"></i>
          <span>能 效 分 析</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/eff-ana/over-all">总体能效</el-menu-item>
          <el-menu-item index="/eff-ana/coller">机冷能效</el-menu-item>
          <el-menu-item index="/eff-ana/water-pump">水泵能效</el-menu-item>
          <el-menu-item index="/eff-ana/cold-tower">冷塔能效</el-menu-item>
        </el-menu-item-group>

      </el-submenu>
      <el-menu-item index="/fault-dia">
          <i class="el-icon-warning-outline"></i>
          <span slot="title">故 障 诊 断</span>
        </el-menu-item>
        <el-submenu index="/run-eva/timely">
        <template slot="title">
          <i class="el-icon-chat-line-round"></i>
          <span>运 行 评 价</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/run-eva/timely">及时评价</el-menu-item>
          <el-menu-item index="/run-eva/delayed">延时评价</el-menu-item>
        </el-menu-item-group>

      </el-submenu>

        <el-menu-item index="/equ-manage">
          <i class="el-icon-office-building"></i>
          <span slot="title">设 备 管 理</span>
        </el-menu-item>
        <el-submenu index="/senior/artificial">
        <template slot="title">
          <i class="el-icon-setting"></i>
          <span>高 级 ......</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/senior/artificial">自控设定</el-menu-item>
          <el-menu-item index="/senior/control">手动模式</el-menu-item>
        </el-menu-item-group>

      </el-submenu>
      <div class="desc" style="color: #fff; font-size: 10px; position: absolute; bottom: 0; left: 13%;">
        中国建筑科学研究院<br>建科环能科技有限公司<br>知识产权所有<br>天津子任科技有限公司<br>协助开发
      </div>
      </el-menu>
</template>

<script>
export default {
  name: 'menuView',
  methods: {
    handleOpen (key, keyPath) {
      console.log('open')
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log('close')
      console.log(key, keyPath)
    }
  }
}
</script>
<style lang="less" scoped>

    .el-menu{
        height: 100%;
        overflow-x: hidden;
        border-right:none !important;
    }
    .el-menu-item{
      height: 38px !important;
      line-height: 38px !important;
    }

</style>
<style lang="less">
.el-submenu__icon-arrow{
  display: none !important;
}
   .el-menu-item, .el-submenu__title {
    height: 38px !important;
    line-height: 38px !important;
    list-style: none;
}
.el-icon-arrow-down:before{
  content: '';
}
.el-menu-item [class^=el-icon-]{
  margin-right: 12px !important;
}
.el-submenu [class^=el-icon-]{
  margin-right: 12px !important;
}
.el-menu-item-group{
  .el-menu-item{
    padding-left: 68px !important;
    font-size: 0.75rem !important;
    font-family: "华文细黑", Arial, sans-serif;
  }
}
.el-menu-item-group__title{
  padding: 0 !important;
}
.el-submenu__icon-arrow{
  right: 69px !important;
}
.el-menu-item,.el-submenu__title{
  padding-left: 16px !important;
}
</style>
